<template>
  <view class="py-10px pb-53px" style="background-color: white">
    <vip-swipe v-if="info.length !== 0" :bannersList="info" />

    <view class="content-block">
      <label class="mb">升级规则</label>
      <view class="rule-content">
        会员等级是由用户的成长值所决定，用户的成长值达到对应等级要求即可升级。不同等级的会员享有不同的等级权益。
      </view>
    </view>
    <view class="content-block">
      <label class="mb">会员等级对照表</label>
      <level-table />
    </view>
    <view class="content-block">
      <label class="mb">成长值获取方式</label>
      <view class="rule-content">
        成长值根据用户获得的小饼干1:1计算。
        注：通过【购物多倍积分】权益额外获赠的小饼干不参与成长值的计算
      </view>
    </view>
  </view>

  
</template>

<script setup>
import VipSwipe from "@/components/vip-swipe";
import LevelTable from "@/components/level-table";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getMemberLevel } from "@/services/vip";
import privacyPopup from "@/components/privacy-popup";

const info = ref([]);

onShow(async () => {
  await memberLevel();
  getApp().accessLogAdd();
});

const memberLevel = async () => {
  const res = await getMemberLevel();
  if (res?.code === 200) {
    res.data.filter((item) => (item.display = JSON.parse(item.display)));
    info.value = res.data;
  }
};
</script>

<style lang="less" scoped>
.content-block {
  box-sizing: border-box;
  padding: 0 20px;

  label {
    display: block;
    margin: 32px 0 0 0;
    font-size: 14px;
    color: #242424;
    line-height: 1;
    font-weight: bold;
  }

  .content {
    width: 100%;
    flex-wrap: wrap;

    .content_item {
      width: 33.3%;
      text-align: center;
      margin-top: 24px;

      image {
        width: 44px;
        height: 44px;
      }

      .item_name {
        font-size: 14px;
        font-weight: 700;
        margin-top: 8.5px;
        color: #242424;
      }

      .item_desc {
        font-size: 12px;
        margin-top: 9.5px;
        color: #919191;
      }
    }
  }

  .rule-content {
    line-height: 18px;
    font-size: 12px;
    color: #707070;
    padding: 0 5px;
    box-sizing: border-box;
  }
}

.mb {
  padding-bottom: 16.5px;
}
</style>
